<template>
  <div class="slider-container">
    <!-- <button @click="prevSlide" class="slide-prev">Previous</button> -->
    <div class="slider-wrapper" :style="{ transform: `translateX(-${currentSlideIndex * 100}%)` }">
      <div v-for="(slide, index) in slides" :key="index" class="slide">
        <img :src="slide.image" :alt="slide.alt">
      </div>
    </div>
    <!-- <button @click="nextSlide" class="slide-next">Next</button> -->
  </div>
</template>

<script>
export default {
    data(){
        return{
            autoPlayInterval: null,
            currentSlideIndex: 0,
            slides: [
        { image: 'https://upyun.dinghuale.com/uploads/20240425/202404250950168362.jpg', alt: 'Image 1' },
        { image: 'https://upyun.dinghuale.com/uploads/20201229/202012291153442076.jpg', alt: 'Image 2' },
        { image: 'https://upyun.dinghuale.com/uploads/20210426/202104261423579213.jpg', alt: 'Image 3' },
        // 更多图片...
      ]
        }
    },
    mounted() {
    this.startAutoPlay(); // 组件挂载后立即启动自动播放
  },
    methods: {
    
    nextSlide() {
      this.currentSlideIndex = (this.currentSlideIndex + 1) % this.slides.length;
    },
    prevSlide() {
      this.currentSlideIndex = (this.currentSlideIndex - 1 + this.slides.length) % this.slides.length;
    },
    startAutoPlay() {
      this.stopAutoPlay(); // 避免重复启动定时器
      this.autoPlayInterval = setInterval(this.nextSlide, 3000); // 每3秒切换一次
    },
    stopAutoPlay() {
      clearInterval(this.autoPlayInterval);
      this.autoPlayInterval = null;
    },
    pauseAutoPlay() {
      this.stopAutoPlay(); // 鼠标悬停时停止自动播放
    },
  }

}
</script>

<style scoped>
img{
    
    
}

.slider-container {
    
    height: 400px;
    /* border: 1px solid black; */
  position: relative;
  overflow: hidden;
}
.slider-wrapper {
  display: flex;
  transition: all 0.5s ease;
}
.slide {
  width: 100%;
  /* 根据需要调整高度 */
}
.slide-prev, .slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.slide-prev {
  left: 10px;
}
.slide-next {
  right: 10px;
}
</style>